<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="220px">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-row>
          <el-form-item label="地区级别:">
            <span>{{ formatLevel(dataInfo.level) }}</span>
          </el-form-item>
          <el-form-item label="地区名称:">
            <span>{{ dataInfo.name }}</span>
          </el-form-item>
          <el-form-item label="地区编码:">
            <span>{{ dataInfo.villAreaCode }}</span>
          </el-form-item>
          <el-form-item label="上级地区:" v-if="$route.query.parentNames">
            <span>{{ $route.query.parentNames }}</span>
          </el-form-item>
          <el-form-item label="小区:">
            <span>{{ dataInfo.villageName }}</span>
          </el-form-item>
          <el-form-item label="房屋面积:">
            <span>{{ dataInfo.houseSpace }}平米</span>
          </el-form-item>
          <el-form-item label="物业费每平米单价:">
            <span>{{ dataInfo.pmcPrice }}</span>
          </el-form-item>
          <el-form-item label="个人物业费折扣:">
            <span>{{ dataInfo.pmcSingleDiscount }}</span>
          </el-form-item>
          <el-form-item label="物业费到期时间:">
            <span>{{ dataInfo.pmcExpireDate }}</span>
          </el-form-item>
          <el-form-item label="物业费上一次缴费日期:">
            <span>{{ dataInfo.pmcLatestDate }}</span>
          </el-form-item>
          <el-form-item label="排序:">
            <span>{{ dataInfo.sort }}</span>
          </el-form-item>
          <el-form-item label="创建人:">
            <span>{{ dataInfo.createUserName }}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改人:">
            <span>{{ dataInfo.modifyUserName }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>
          <el-form-item label="备注:">
            <span>{{ dataInfo.remark }}</span>
          </el-form-item>
          <el-form-item label="楼栋长联系方式:">
            <div v-for="(item,index) in dataInfo.linkList" :key="index" style="margin-bottom: 10px;">
            {{ item.linkName }}：{{ item.linkPhone }}
            </div>
          </el-form-item>
          <el-form-item label="消防通道图:">
            <el-image v-if="dataInfo.fireExitPicture" style="width: 200px; height: 200px"
              :src="dataInfo.fireExitPicture || ''" fit="contain" :preview-src-list="[dataInfo.fireExitPicture]">
            </el-image>
          </el-form-item>
          <el-form-item label="消防通道图描述:">
            <div style="min-height:220px">{{ dataInfo.fireExitDepiction }}</div>
          </el-form-item>

          <el-form-item label="就近消防设备图:">
            <el-image v-if="dataInfo.fireEquipPicture" style="width: 200px; height: 200px"
              :src="dataInfo.fireEquipPicture || ''" fit="contain" :preview-src-list="[dataInfo.fireEquipPicture]">
            </el-image>
          </el-form-item>
          <el-form-item label="就近消防设备图描述:">
            <div style="min-height:220px">
              {{ dataInfo.fireEquipDepiction }}
            </div>
          </el-form-item>

          <el-form-item label="就近aed图:">
            <el-image v-if="dataInfo.aedPicture" style="width: 200px; height: 200px" :src="dataInfo.aedPicture || ''"
              fit="contain" :preview-src-list="[dataInfo.aedPicture]">
            </el-image>
          </el-form-item>
          <el-form-item label="就近aed图描述:">
            <div style="min-height:220px">{{ dataInfo.aedDepiction }}</div>
          </el-form-item>
          <el-form-item label="消防通道入口图:">
            <el-image v-if="dataInfo.fireEnterPicture" style="width: 200px; height: 200px"
              :src="dataInfo.fireEnterPicture || ''" fit="contain" :preview-src-list="[dataInfo.fireEnterPicture]">
            </el-image>
          </el-form-item>
          <el-form-item label="消防通道入口地址/经度/纬度：">
            <div style="min-height:220px">
              {{ dataInfo.fireEnterAddress }} / {{ dataInfo.fireEnterLng }} / {{ dataInfo.fireEnterLat }}
            </div>
          </el-form-item>

          <el-form-item label="急救通道入口图:">
            <el-image v-if="dataInfo.aidEnterPicture" style="width: 200px; height: 200px"
              :src="dataInfo.aidEnterPicture || ''" fit="contain" :preview-src-list="[dataInfo.aidEnterPicture]">
            </el-image>
          </el-form-item>
          <el-form-item label="急救通道入口地址/经度/纬度：">
            <div style="min-height:220px">
              {{ dataInfo.aidEnterAddress }} / {{ dataInfo.aidEnterLng }} / {{ dataInfo.aidEnterLat }}

            </div>
          </el-form-item>

          <el-form-item label="110通道入口图:">
            <el-image v-if="dataInfo.policeEnterPicture" style="width: 200px; height: 200px"
              :src="dataInfo.policeEnterPicture || ''" fit="contain" :preview-src-list="[dataInfo.policeEnterPicture]">
            </el-image>
          </el-form-item>
          <el-form-item label="110通道入口地址/经度/纬度：">
            <div style="min-height:220px">
              {{ dataInfo.policeEnterAddress }} / {{ dataInfo.policeEnterLng }} / {{ dataInfo.policeEnterLat }}
            </div>
          </el-form-item>
          <el-form-item label="单元户型结构图:">
            <div class="img-video">
              <template title="点击可预览" v-for="item in dataInfo.houseStructImgs">
                <el-image fit="cover" v-if="item.type == 1" :src="item.url" alt="" :preview-src-list="images"></el-image>
                <video v-else="item.type==2" :src="item.url" controls>
                  <h2>我们很抱歉，您的浏览器<strong>不支持video标签</strong></h2>
                  <a href="https://www.google.cn/chrome/">点击这里下载浏览器</a>
                </video>
              </template>
            </div>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import VillageAreaApi from "@/api/address/villageArea";
export default {
  data() {
    return {
      dataInfo: {},
      fromType: 1,
    };
  },
  computed: {
    images() {
      if (this.dataInfo.houseStructImgs) {
        return this.dataInfo.houseStructImgs.filter(item => item.type == 1).map(item => item.url)
      } else {
        return []
      }
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      VillageAreaApi.getVillageAreaInfo({ id: this.$route.query.id }).then(
        (res) => {
          this.dataInfo = res.data;
          if (this.dataInfo.houseStructImgs) {
            this.dataInfo.houseStructImgs = this.dataInfo.houseStructImgs.split(",")
              .map(url => ({ url, type: 1 }))
          }else{
            this.dataInfo.houseStructImgs =[]
          }
          if(!this.dataInfo.linkList){
            this.dataInfo.linkList = []
          }
        }
      );
    },
    formatLevel(cellValue) {
      if (cellValue == 1) {
        return "栋";
      } else if (cellValue == 2) {
        return "单元";
      } else if (cellValue == 3) {
        return "层";
      } else if (cellValue == 4) {
        return "门牌号";
      }
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/address/villageAreaManagement" });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";

.img-video {
  width: 600px;
  display: flex;
  flex-wrap: wrap;

  .el-image {
    width: 150px;
    height: 150px;
    vertical-align: bottom;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }

  video {
    width: 150px;
    height: 150px;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }
}
</style>
